<template>
  <div class="sign">
    <div class="logo">
      <div class="logo-c">
        <img src="../assets/logo.png"/>
      </div>
    </div>

    <div class="account">
      <div class="account-c">
        <div class="shouji">
          <div class="ic">
            <i class="iconfont icon-yonghu"></i>
          </div><input placeholder="请输入手机号" type="tel" v-model="mobile">
        </div>
        <div class="mima">
          <div class="ic">
            <i class="iconfont icon-suoding"></i>
          </div><input placeholder="请输入登录密码" type="password" v-model="password">
        </div>
      </div>
    </div>

    <div class="btn">
      <div class="btn-c">
        <img src="../assets/denglu.png" @click="sign()" />
      </div>
    </div>

    <div class="forget">
      <div class="forget-c">
        <router-link :to="{path:'/forget'}" style='color: #000;'>
          <p>忘记密码?</p>
        </router-link>
      </div>
    </div>

  </div>
</template>

<script>
import { MessageBox } from 'mint-ui'
import { com } from '@service'

export default {
  name: 'Sigin',
  data () {
    return {
      mobile: '',
      password: ''
      // mobile: '18616666622',
      // password: 'py@admin'
    }
  },
  methods: {
    async sign () {
      var that = this
      if (!this.mobile) {
        MessageBox.alert('请输入手机号')
        return
      }
      if (!this.password) {
        MessageBox.alert('请输入密码')
        return
      }
      try {
        let mobile = this.mobile
        let password = this.password
        let data = await com.login({ mobile, password })
        // console.log(data)
        this.$store.dispatch('user/info', data)
        const router = that.$router
        router.push('home')
      } catch (error) {
        MessageBox.alert(error.info)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.sign {
  background-image: url('./../assets/signb.png');
  width: 100%;
  height: 100%;
  background-size: cover;
  overflow: hidden;
}
.logo {
  width: 100%;
  height: 60%;
  position: relative;
}
.logo-c {
  padding: 0.5rem;
  height: 50%;
}
.logo img {
  position: absolute;
  left: 50%;
  width: 7rem;
  height: 7rem;
  margin-left: -3.5rem;
  margin-top: 3rem;
}
.account {
  width: 90%;
  margin-left: 5%;
  background: #fff;
  border-radius: 6px;
}
.account-c {
  padding-left: 1rem;
  padding-right: 1rem;
}
.forget {
  width: 92%;
  margin-left: 4%;
}
.forget-c {
  padding-left: 1rem;
  padding-right: 1rem;
  height: 3rem;
}
.forget-c p {
  line-height: 3rem;
  color: #1e82d2;
  text-align: center;
  font-size: 0.8rem;
}
.btn {
  width: 92%;
  margin-left: 4%;
  margin-top: 2rem;
}
.btn-c {
  padding-left: 1rem;
  padding-right: 1rem;
}
.btn-c img {
  width: 100%;
  height: 3.5rem;
  border: none;
  color: #fff;
}
.shouji input {
  border: none;
  height: 2.5rem;
  font-size: 1.15rem!important;
  color: #666;
}
.shouji {
  border-bottom: 1px solid #10aeff;
  height: 3rem;
}
.mima {
  border-bottom: 1px solid #10aeff;
  height: 3rem;
}
.mima input {
  border: none;
  height: 2.5rem;
  font-size: 1.15rem!important;
  color: #666;
}
.account-c i {
  display: inline-block;
  width: 10%;
  line-height: 2.5rem;
}
::-webkit-input-placeholder {
  font-size: 1rem !important;
}
.iconfont {
  font-size: 1.5rem;
  color: #10aeff;
}
.ic {
  display: inline-block;
  width: 3rem;
  line-height: 3rem;
}
</style>
